<template>
	<view>
				
		<u-upload 
			ref="uUpload"  
			:auto-upload = "autoUpload"
			:action="vuex_upload_info.url" 
			:form-data="get_form_data" 
			:max-count="maxCount"
			:file-list="fileList"
			@on-success="handleSuccess" 
			@on-list-change="handleListChange" 
			@on-uploaded="handleUploaded" 
			@on-remove="handleRemove" 
			@on-choose-fail="handleChooseFail" 
			@on-on-error="handleError" 
		/>
	</view>
</template>

<script>
	export default {
	props:{
		dir:{
			type:String,
			default:'image'
		},
		maxCount:{
			type:Number,
			default:9
		},
		autoUpload:{
			type:Boolean,
			default:false
		},
	},
	data() {
		return {
			showUploadList: false, 
			// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
			// 这里直接获取内部的lists变量即可
			fileList: [],
			
			upload_fnc:(img_list,lists)=>{}
		}
	},
	computed:{
		get_form_data(){
			let obj = {type:this.dir,'x:img_type':this.dir,...this.vuex_upload_info.data}
			return obj
		}
	},
	mounted() {
		if(!this.vuex_upload_info.url){
			this.$u.http.get("/api/upload/info",{
				
			}).then(({data})=>{
				this.$u.vuex('vuex_upload_info', data||{})
				console.log('-----mounted',data,this.vuex_upload_info.url)
			}).catch(v=>{
				this.$u.toast("获取上传资源异常")
			})
		}
	},
	methods: {
		handleUpload(fnc){
			this.$refs.uUpload.upload()
			if(!this.fileList.length){
				if(typeof fnc==='function') fnc([],[])
			}else{
				if(typeof fnc==='function') this.upload_fnc=fnc
			}
		},
		handleSuccess(data, index, lists, name){
			console.log('---handleSuccess',data,index,name,lists)
			this.$emit('uploadSuccess',data)
		},
		handleUploaded(lists, name){
			console.log('++++++????',name,lists)
			let img_list = this.getListImg(lists)
			if(this.autoUpload){
				this.$emit('uploadComplete',img_list)
			}else{
				this.upload_fnc(img_list,lists)
			}
		},
		handleListChange(lists, name){
			this.fileList = lists
			console.log(lists,name)
			this.$emit('handleListChange',lists)
		},
		handleRemove(index, lists, name){
			this.$u.toast("移除文件")
			if(this.autoUpload){
				let img_list = this.getListImg(lists)
				this.$emit('uploadComplete',img_list)
			}
		},
		handleChooseFail(lists, name){
			this.$u.toast("文件选择失败")
		},
		handleError(lists, name){
			this.$u.toast("文件上传错误")
		},
		
		getListImg(lists){
			let img_list = []
			lists.map(function(item){
				if(item.response && item.response.data){
					img_list.push(item.response.data.key)
				}
			})
			return img_list
		}
	}
}
</script>

<style lang="scss">
	.u-demo-wrap {
		background-color: #FFFFFF;
		padding: 40rpx 8rpx;
		margin-left: -14rpx;
		margin-right: -14rpx;
	}
	
	.u-add-wrap {
		flex-direction: column;
		color: $u-content-color;
		font-size: 28rpx;
	}
	
	/deep/ .slot-btn {
		width: 329rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.pre-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pre-item {
		flex: 0 0 48.5%;
		border-radius: 10rpx;
		height: 140rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
	}

	.u-progress {
		position: absolute;
		bottom: 10rpx;
		left: 8rpx;
		right: 8rpx;
		z-index: 9;
		width: auto;
	}

	.pre-item-image {
		width: 100%;
		height: 140rpx;
	}

	.u-delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
		background-color: $u-type-error;
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
